<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <current-user>                
            <template v-slot:aaa="obj">
                <p>
                    {{ obj.u.firstName }}
                </p>
                <p>
                    dog.name：{{ obj.dog.name }}
                </p>
                <p>
                    book：{{ obj.book }}
                </p>
            </template>    
        </current-user>
    </div>
</body>
</html>
<script src="./js/vue.js"></script>
<script>
// 

// 定义组件
let currentUser ={
    template:`
        <div>
            <p>
                name： <slot name="aaa" v-bind:u="user" v-bind:dog="d" book="三国演义" >{{ user.lastName }}</slot>
            </p>
        </div>
    `,
    data(){
        return {
            user:{
                firstName:"一星",
                lastName:"王"
            },
            d:{
                name:"小黑"
            },
            str:""
        }
    }
}

let vm = new Vue({
    el:"#app",
    components:{
        currentUser
    },
    data:{
        msg:"hi"
    }
});


</script>